{% include 'header.html'%}
<title>Package Index</title>
<script type="text/javascript" src="{{ STATIC_URL }}js/mustache.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-Mustache.js"></script>
<script id="tr_build_tmpl" type="text/html">
    <tr class="plugable">
    [[#m_builds_len?]]
      <td class="th-label">Build:</td>
      <td><select id="sel_build" name="sel_build" class="fixed-field">
      [[#m_builds]]
        <option value="[[.]]" selected>[[.]]</option>
      [[/m_builds]]
      </select><span class="field-indic"></span>
    </td>
    [[/m_builds_len?]]
    </tr>
    <tr class="plugable">
      <td class="th-label"></td>
      <td><input id="btn_search_change" name="btn_showdb" type="button" value="Search Change" style="margin-left: 10px;"/>
      <span class="field-indic"></span>
    </td></tr>
</script>
<script id="layers_tmpl" type="text/html">
    [[#layers]]
    <div class="module_box"> 
        <div class="layer_tag"><span>[[layer_display]]</span></div>
        [[#modules]]
            <div class="module[[#pkg_exist]] module_changed[[/pkg_exist]]">
                <span>[[name]]</span>
            </div>
            [[#pkg_exist]]
            <div class="changed_pkg">
                <ul>
                [[#pkg]]
                <li><a href="#">[[package_name__name]]</a><span class="flag_color[[change_flag]]">[[change_flag_display]]</span></li>
                [[/pkg]]
                </ul>
            </div>
            [[/pkg_exist]]
        [[/modules]]
    </div>
    [[/layers]]
</script>

<script type="text/javascript">
function endLoading(obj) {
    if (obj) {
        var nextobj = obj.next('.field-indic');
        if (nextobj)
            nextobj.attr('class', 'field-indic');
    }
}
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function showLoading(obj) {
    if (obj) {
        var nextobj = obj.next('.field-indic');
        if (nextobj)
            nextobj.attr('class', 'field-indic loading-indicator');
    }
}


Mustache.tags = ['[[', ']]'];
var csrftoken = getCookie('csrftoken');
$(document).ready(function(){
    $.Mustache.addFromDom('tr_build_tmpl', 'layers_tmpl');
    $('#sel_os_release').change(function() {
        var sel_osr = $(this);
        if (!sel_osr.val()) {
            return;
        }
        $('.plugable').remove();
        $.ajax({
            type: 'post',
            url: '{%url ajax_package_builds %}',
            dataType: 'json',
            data: $('#form_package_index').serializeArray(),
            crossDomain: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
                showLoading(sel_osr);
            },
            success: function(r) {
                endLoading(sel_osr);
                $('#tr_os_release').mustache(
                    'tr_build_tmpl', 
                    {m_builds: r.builds,
                    'm_builds_len?': r.builds ? r.builds.length : null},
                    {method: 'after'});
                },
            error: function() {
                endLoading(sel_osr);
                alert("get builds failed!");
            }
        }); // end of ajax
    }); // end of change

    $('#div_search').on('click', '#btn_search_change', function(e) {
        e.preventDefault();
        var sel_osr = $(this);
        $('#div_layers').empty();
        $.ajax({
            type: 'post',
            url: '{%url ajax_load_layermodules %}',
            dataType: 'json',
            data: $('#form_package_index').serializeArray(),
            crossDomain: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
                showLoading(sel_osr);
            },
            success: function(r) {
                endLoading(sel_osr);
                $('#div_layers').mustache(
                    'layers_tmpl', 
                    {layers: r},
                    {method: 'html'});
                },
            error: function() {
                endLoading(sel_osr);
                alert("get layer modules failed!");
            }
        }); // end of ajax
    }); // end of on

    $('#div_layers').on('click', '.module_changed', function(e) {
        e.preventDefault();
        var $this = $(this);
        var changed_pkg = $this.next('.changed_pkg')
        if (changed_pkg.css('display') != 'none') {
            changed_pkg.hide();
            return
        }
        var this_offset = $this.offset();
        var parent = $this.parent();
        var parent_offset = parent.offset();
        var pkg_left = this_offset.left - parent_offset.left - 1;
        var pkg_top = this_offset.top - parent_offset.top  + $this.height() + 11;
        changed_pkg.css({'top':pkg_top,'left':pkg_left}).show();
    }); //end of on

}); // end of document ready
</script>
</head>
<body class="defect-opensolaris-org-bz">
{% include 'topnav.html' %}
<div>
  <table id="tabtitles" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td id="title">
    <p><font color="#FFFFFF">&nbsp;Package &raquo Index</font></p>
    </td></tr>
  </tbody></table>
</div>

<div id="bugzilla-body" style="overflow:auto; min-height: 450px;">
 
<div id="div_search" style="overflow: auto;">
  <form id="form_package_index" method="POST" action="">
  {% csrf_token %}
  <table border="0" align="left" class="bz_buglist">
     <tr id="tr_os_release">
      <td class="th-label">Solaris Release:</td>
      <td><select id="sel_os_release" name="sel_os_release" class="fixed-field">
      <option value=""></option>
      {% for os_release in os_release_list %}
      <option value="{{os_release.name}}">{{os_release.name}}</option>
      {% endfor %} 
      </select>
      <span class="field-indic"></span>
      </td>
     </tr>
  </table>
  </form>
</div>
<div><br></div>
<div class="layer_box" id="div_layers">
</div>
</div>

{% include 'footer.html' %}
